<template>
  <div class="mb-3">
    <el-button class="mb-15px" type="warning" :icon="Refresh" @click="getList"> 刷新 </el-button>
    <el-button class="mb-15px" type="success" :icon="Document" :disabled="disabled" @click="save"> 保存 </el-button>
    <el-button class="mb-15px" type="primary" :icon="Edit" :disabled="disabled" @click="onSubmit"> 提交 </el-button>
    <el-button class="mb-15px" type="warning" :icon="RefreshLeft" @click="revoke"> 撤销 </el-button>
    <el-button class="mb-15px" type="success" :icon="Edit" @click="check"> 审核 </el-button>
    <el-button class="mb-15px" type="primary" :icon="EditPen" @click="unCheck"> 反审核 </el-button>
    <el-button class="mb-15px" type="danger" :icon="FolderDelete" @click="valid"> 作废 </el-button>
  </div>
  <!-- 表头 -->
  <DetailHeadTable ref="headTable" :partParams="data" :column="headColumn" :list="headList" />
  <!-- 列表 -->
  <DetailTable class="mt-3" ref="table" :partParams="data" :column="column" :list="list" />
</template>

<script lang="ts" setup>
import {
  Refresh,
  Document,
  Edit,
  RefreshLeft,
  EditPen,
  FolderDelete
} from '@element-plus/icons-vue'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { defineProps, ref, computed, onBeforeUnmount } from 'vue'
import * as BasicApi from '@/api'

import DetailHeadTable from './DetailHeadTable.vue'
import DetailTable from './DetailTable.vue'
import { useMessage } from '@/hooks/useMessage'
import eventBus from '@/libs/eventBus'
const message = useMessage()

//定义接收的props
const props = defineProps({
  // 定义一个对象类型的 prop
  data: {
    type: Object,
    default: () => ({ groupName: '', jobType: '' })
  }
})

const jobType = computed(() => {
  return props.data.jobType
})

const disabled = ref(false)
const setButtonStatus = (flag: boolean)=>{
  disabled.value = flag
}
//接收保存和提交按钮是否置灰的事件
eventBus.on(`OP1ButtonDisabled-${jobType.value}`, setButtonStatus)

const emit = defineEmits(['refresh'])

//表头信息
const headColumn = ref<any[]>([])
const headList = ref<any[]>([])
//列表信息
const column = ref<any[]>([])
const list = ref<any[]>([])

const getDetailField = (data: any) => {
  const { detailHeadFieldInfo, detailFieldInfo } = data
  headColumn.value = detailHeadFieldInfo
  column.value = detailFieldInfo
}
//渲染列头
eventBus.on(`getOP1DetailField-${jobType.value}`, getDetailField)

const loading = ref(false)
const getList = async () => {
  loading.value = true
  try {
    const post = {
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'GetDetail'
    }
    const inputStr = objectToQueryParams(post)
    //获取行数据
    const rowData = sessionStorage.getItem('WMS_OP1_ROW_DATA') as string
    const jsonData = JSON.parse(rowData) ?? {}
    const result = (await BasicApi.Query({ inputStr, jsonData })) as any
    const { code, msg, data, rsCount } = result
    if (code !== 200) {
      message.error(msg)
      return
    }
    headList.value = data.headInfo ?? []
    list.value = data.listInfo ?? []
  } finally {
    loading.value = false
  }
}

//渲染列表
eventBus.on(`getOP1DetailList-${jobType.value}`, getList)

const save = async () => {
  // 校验表单
  try {
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'Save'
    })

    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value
      }
    }
    const res = (await BasicApi.Save(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    //刷新当前列表
    getList()
  } finally {
  }
}

const onSubmit = async () => {
  try {
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'Submit'
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value
      }
    }
    const res = (await BasicApi.Submit(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    //刷新当前列表
    getList()
  } finally {
  }
}

/** 撤销操作 */
const revoke = async () => {
  try {
    // 更新的二次确认
    await message.delConfirm('请确认是否撤销？')
    // 发起更新
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'CancelAssign'
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value
      }
    }
    const res = (await BasicApi.WorkFlowOper(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    // 刷新列表
    getList()
  } catch {}
}

/** 审核操作 */
const check = async () => {
  try {
    // 更新的二次确认
    await message.delConfirm('请确认是否审核？')
    // 发起更新
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'Audit'
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value
      }
    }
    const res = (await BasicApi.WorkFlowOper(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    // 刷新列表
    getList()
  } catch {}
}

/** 反审核操作 */
const unCheck = async () => {
  try {
    // 更新的二次确认
    await message.delConfirm('请确认是否反审核？')
    // 发起更新
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'UnAudit'
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value
      }
    }
    const res = (await BasicApi.WorkFlowOper(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    // 刷新列表
    getList()
  } catch {}
}

/** 作废操作 */
const valid = async () => {
  try {
    // 更新的二次确认
    await message.delConfirm('请确认是否作废？')
    // 发起更新
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'Cancel'
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value
      }
    }
    const res = (await BasicApi.WorkFlowOper(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    // 刷新列表
    getList()
  } catch {}
}

// 在组件卸载之前移除侦听
onBeforeUnmount(() => {
  eventBus.off(`getOP1DetailField-${jobType.value}`, getDetailField)
  eventBus.off(`getOP1DetailList-${jobType.value}`, getList)
})
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
